﻿<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head th:insert="~{ common :: css }">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Lendex - Personal Portfolio Bootstrap Template</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/assets/prism/prism.css}">
</head>

<body>

    <main class="main-wrapper">
        <!-- .....:::::: Start Header Section :::::.... -->
        <header class="header-section sticky-header d-none d-lg-block">
            <div class="header-wrapper">
                <div class="container">
                    <div class="row justify-content-between align-items-center">
                        <div class="col">
                            <!-- Start Header Logo -->
                            <a href="index.html" class="header-logo">
                                <img src="assets/images/logo/logo.png" alt="">
                            </a>
                            <!-- End Header Logo -->
                        </div>
                        <div class="col-auto">
                            <!-- Start Header Menu -->
                            <ul class="header-nav">
                                <li><a th:href="@{/index}">首页</a></li>
                                <li class="has-dropdown">
                                    <a th:href="@{/skill}">我的技能</a>
                                </li>
                                <li class="has-dropdown">
                                    <a th:href="@{/blog}">博客</a>
                                </li>
                                <li><a th:href="@{/project}">项目</a></li>
                                <li class="has-dropdown">
                                    <a href="#">其它</a>
                                    <ul class="submenu">
                                        <li><a th:href="@{/about}">关于我</a></li>
<!--                                        <li><a th:href="@{/contact}">联系我</a></li>-->
                                    </ul>
                                </li>
                            </ul>

                            <!-- End Header Menu -->
                        </div>

                        <div class="col">
                            <div class="header-btn-link text-end">
                                <a th:href="@{contact}" class="btn btn-sm btn-outline-one icon-space-left">Hire Me <i class="icofont-double-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- .....:::::: End Header Section :::::.... -->

        <!-- .....:::::: Start Mobile Header Section :::::.... -->
        <div class="mobile-header d-block d-lg-none">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col">
                        <div class="mobile-logo">
                            <a href="index.html"><img src="assets/images/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mobile-action-link text-end">
                            <a href="#mobile-menu-offcanvas" class="offcanvas-toggle offside-menu"><i class="icofont-navigation-menu"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- .....:::::: Start MobileHeader Section :::::.... -->

        <!--  Start Offcanvas Mobile Menu Section -->
        <div id="mobile-menu-offcanvas" class="offcanvas offcanvas-rightside offcanvas-mobile-menu-section">
            <!-- Start Offcanvas Header -->
            <div class="offcanvas-header text-right">
                <button class="offcanvas-close"><i class="icofont-close-line"></i></button>
            </div> <!-- End Offcanvas Header -->
            <!-- Start Offcanvas Mobile Menu Wrapper -->
            <div class="offcanvas-mobile-menu-wrapper">

                <!-- Start Mobile Menu  -->
                <div class="mobile-menu-bottom">
                    <!-- Start Mobile Menu Nav -->
                    <div class="offcanvas-menu">
                        <ul>

                            <li><a th:href="@{/index}">首页</a></li>

                            <li>
                                <a th:href="@{skill}"><span>技能</span></a>

                            </li>
                            <li>
                                <a th:href="@{blog}" href="#"><span>博客</span></a>
                            </li>
                            <li><a th:href="@{/project}">项目</a></li>
                            <li>
                                <a th:href="@{about}"><span>关于我</span></a>
                            </li>
                        </ul>
                    </div> <!-- End Mobile Menu Nav -->

                </div> <!-- End Mobile Menu -->

                <!-- Start Mobile contact Info -->
                <div class="mobile-contact-info text-center">
                    <ul class="social-link">
                        <li><a target="_blank" href="https://example.com"><i class="icofont-facebook"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-twitter"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-skype"></i></a></li>
                    </ul>
                </div>
                <!-- End Mobile contact Info -->

            </div> <!-- End Offcanvas Mobile Menu Wrapper -->
        </div>
        <!-- ...:::: End Offcanvas Mobile Menu Section:::... -->

        <!-- Offcanvas Overlay -->
        <div class="offcanvas-overlay"></div>

        <!-- ...::: Start Breadcrumb Section :::... -->
        <div class="breadcrumb-section section-bg overflow-hidden pos-relative">
            <div class="breadcrumb-shape-top-left"></div>
            <div class="breadcrumb-shape-bottom-right"></div>
            <div class="breadcrumb-box">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumb-content">
                                <h2 class="title">博客详情</h2>
                                <ul class="breadcrumb-link">
                                    <li><a href="blog-details.html">首页</a></li>
                                    <li class="active" aria-current="page" th:each="blog : ${ blogsList }" th:text="${ blog.category.name }">后端</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Breadcrumb Section :::... -->

        <!-- ...::: Start Blog List Section :::... -->
        <div class="blog-details-section section-gap-tb-165">
            <div class="blog-details-box">
                <div class="container" th:each="blog : ${ blogsList }">
                    <div class="row flex-lg-row-reverse flex-column-reverse">
                        <div class="col-xl-4 col-lg-5">
                            <!-- Start Sidebar Widget Area-->
                            <div class="sidebar-widget-area">

                              <!-- Start Sidebar Widget Single Item - Search Widgets -->
                              <div class="sidebar-widget-single-area search-widgets">
                                  <form class="search-widgets-box" action="#" method="post">
                                      <input type="search" placeholder="Search here">
                                      <button><i class="icofont-search-1"></i></button>
                                  </form>
                              </div>
                              <!-- End Sidebar Widget Single Item - Search Widgets -->

                              <!-- Start Sidebar Widget Single Item - Catagory Widgets -->
                              <div class="sidebar-widget-single-area catagory-widgets">
                                  <h3 class="title">Category</h3>
                                  <ul class="widget-nav-list catagory-item-list">
                                      <li><a href="#"><span class="text">UI/UX Design</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>
                                      <li><a href="#"><span class="text">Web Development</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>
                                      <li><a href="#"><span class="text">Brand Identity</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>
                                      <li><a href="#"><span class="text">Digital Marketing</span><span class="icon"><i class="icofont-double-right"></i></span></a></li>
                                  </ul>
                              </div>
                              <!-- End Sidebar Widget Single Item - Catagory Widgets -->

                              <!-- Start Sidebar Widget Single Item - Resume Widgets -->
                              <div class="sidebar-widget-single-area resume-widgets">
                                  <h3 class="title">Resume</h3>
                                  <ul class="widget-nav-list resume-item-list">
                                      <li><a href="#"><span class="text">Get Resume.pdf</span><span class="icon"><i class="icofont-file-pdf"></i></span></a></li>
                                      <li><a href="#"><span class="text">Get Resume.doc</span><span class="icon"><i class="icofont-file-word"></i></span></a></li>
                                      <li><a href="#"><span class="text">Get Resume.ppt</span><span class="icon"><i class="icofont-file-powerpoint"></i></span></a></li>
                                  </ul>
                              </div>
                              <!-- End Sidebar Widget Single Item - Resume Widgets -->

                              <!-- Start Sidebar Widget Single Item - Recent Post Widgets -->
                              <div class="sidebar-widget-single-area recentpost-widget">
                                  <h3 class="title">最近文章</h3>
                                  <ul class="recent-blog-item-list">
                                      <li th:each="blog : ${sortedBlogs}">
                                          <a href="blog-details-sidebar-left.html" class="image">
                                              <img th:src="${ blog.cover }" src="assets/images/blog/recent-blog-img-1.jpg" alt="">
                                          </a>
                                          <div class="content">
                                              <h4 class="title"><a href="blog-details-sidebar-left.html" th:href="@{ /blog/{blogId}/details(blogId = ${blog.id}) }"> [[ ${ blog.title } ]] </a></h4>
                                              <div class="post-meta">
                                                  <a class="date icon-space-right" th:text="${ #dates.format( blog.createTime, 'yyyy-MM-dd HH:mm:ss' ) }"><i class="icofont-calendar"></i> 09 Apr, 2021</a>
                                              </div>
                                          </div>
                                      </li>
<!--                                      <li>-->
<!--                                          <a href="blog-details-sidebar-left.html" class="image">-->
<!--                                              <img src="assets/images/blog/recent-blog-img-2.jpg" alt="">-->
<!--                                          </a>-->
<!--                                          <div class="content">-->
<!--                                              <h4 class="title"><a href="blog-details-sidebar-left.html">We take your amazing journey.</a> </h4>-->
<!--                                              <div class="post-meta">-->
<!--                                                  <a href="#" class="date icon-space-right"><i class="icofont-calendar"></i> 10 Apr, 2021</a>-->
<!--                                              </div>-->
<!--                                          </div>-->
<!--                                      </li>-->
<!--                                      <li>-->
<!--                                          <a href="blog-details-sidebar-left.html" class="image">-->
<!--                                              <img src="assets/images/blog/recent-blog-img-3.jpg" alt="">-->
<!--                                          </a>-->
<!--                                          <div class="content">-->
<!--                                              <h4 class="title"><a href="blog-details-sidebar-left.html">Things About Portfolio.</a> </h4>-->
<!--                                              <div class="post-meta">-->
<!--                                                  <a href="#" class="date icon-space-right"><i class="icofont-calendar"></i> 13 Apr, 2021</a>-->
<!--                                              </div>-->
<!--                                          </div>-->
<!--                                      </li>-->
<!--                                      <li>-->
<!--                                          <a href="blog-details-sidebar-left.html" class="image">-->
<!--                                              <img src="assets/images/blog/recent-blog-img-4.jpg" alt="">-->
<!--                                          </a>-->
<!--                                          <div class="content">-->
<!--                                              <h4 class="title"><a href="blog-details-sidebar-left.html">Everyone Should Know .</a> </h4>-->
<!--                                              <div class="post-meta">-->
<!--                                                  <a href="#" class="date icon-space-right"><i class="icofont-calendar"></i> 15 Apr, 2021</a>-->
<!--                                              </div>-->
<!--                                          </div>-->
<!--                                      </li>-->
                                  </ul>
                              </div>
                              <!-- End Sidebar Widget Single Item - Recent Post Widgets -->

                              <!-- Start Sidebar Widget Single Item - Social Widgets -->
                              <div class="sidebar-widget-single-area ">
                                  <h3 class="title">Follow Me</h3>
                                  <ul class="social-link">
                                      <li><a href="https://www.example.com" target="_blank"><i class="icofont-facebook"></i></a></li>
                                      <li><a href="https://www.example.com" target="_blank"><i class="icofont-dribbble"></i></a></li>
                                      <li><a href="https://www.example.com" target="_blank"><i class="icofont-linkedin"></i></a></li>
                                  </ul>
                              </div>
                              <!-- End Sidebar Widget Single Item - Social Widgets -->
                            </div>
                            <!-- End Sidebar Widget Area-->
                        </div>
                        <div class="col-xl-7 col-lg-7 offset-xl-1">
                            <!-- Start Blog Content Area -->
                            <div class="blog-content-area">
                                <!-- Start Section Content -->
                                <div class="default-content-style pos-relative">
                                    <div class="content-meta">
                                        <span class="section-tag">[[ ${ blog.views } ]] 人看过</span>
                                        <div class="post-meta-2">
                                          <span class="icon-space-right"><i class="icofont-ui-user"></i> [[ ${ blog.user.username } ]] </span>
                                          <span class="icon-space-right" th:text="${ #dates.format(blog.getCreateTime(), 'yyyy-MM-dd HH:mm:ss') }"><i class="icofont-calendar"></i>09 Feb, 2021</span>
                                        </div>
                                    </div>
                                    <h2 class="title" th:text="${ blog.title }">使用SpringBoot实现拦截器功能</h2>

                                    <div id="content" class="typo typo-selection js-toc-content" th:utext="${ blog.content }"></div>
                                    </div>
                                <!-- End Section Content -->
                            </div>
                            <!-- End Blog Content Area -->

                            <!--  Start Comment Area  -->
                            <div class="comment-area section-mt-75">
                                <!-- Start Comment Box-->
                                <div class="comment-box">
                                    <hr>
                                    <h3 class="title">评论:</h3>
                                    <ul class="comment-list-item">
                                        <!-- Start Comment Single Item -->
                                        <li>
                                            <div class="comment-single-item">
                                                <div class="image">
                                                    <img  src="assets/images/bear.png" alt="">
                                                </div>
                                                <div class="content">
                                                    <div class="top">
                                                        <div class="author-meta">
                                                            <h4 class="name">Bear</h4>
                                                            <span class="designation">Web Developer</span>
                                                        </div>
                                                        <button class="replay-btn icon-space-right"> <i class="icofont-reply"></i> Reply</button>
                                                    </div>
                                                    <div class="bottom">
                                                        <div class="text">
                                                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting and
                                                                has been the industry's standard dummy text ever since the 1500s, whe
                                                                took a galley of type and scrambled.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <!-- End Comment Single Item -->
                                        <!-- Start Comment Single Item -->
                                        <li>
                                            <div class="comment-single-item">
                                                <div class="image"><img src="assets/images/users/user-2.jpg" alt=""></div>
                                                <div class="content">
                                                    <div class="top">
                                                        <div class="author-meta">
                                                            <h4 class="name">Francisco Bond</h4>
                                                            <span class="designation">Web Developer</span>
                                                        </div>
                                                        <button class="replay-btn icon-space-right"> <i class="icofont-reply"></i> Reply</button>
                                                    </div>
                                                    <div class="bottom">
                                                        <div class="text">
                                                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting and
                                                                has been the industry's standard dummy text ever since the 1500s, whe
                                                                took a galley of type and scrambled.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- has Reply -->
                                            <div class="has-reply">
                                                <div class="comment-single-item">
                                                    <div class="image"><img src="assets/images/users/user-3.jpg" alt=""></div>
                                                    <div class="content">
                                                        <div class="top">
                                                            <div class="author-meta">
                                                                <h4 class="name">Rochell Duckett</h4>
                                                                <span class="designation">Web Developer</span>
                                                            </div>
                                                            <button class="replay-btn icon-space-right"> <i class="icofont-reply"></i> Reply</button>
                                                        </div>
                                                        <div class="bottom">
                                                            <div class="text">
                                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting and
                                                                    has been the industry's standard dummy text ever since the 1500s, whe
                                                                    took a galley of type and scrambled.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <!-- End Comment Single Item -->
                                    </ul>
                                </div>
                                <!-- End Comment Box-->
                            </div>
                            <!-- ...::: End Comment Area :::... -->

                            <!-- Start Tag Area  -->
                            <div class="tag-area section-mt-75">
                                <!-- Start Tag Box -->
                                <div class="tag-box">
                                    <div class="left">
                                        <div class="tag-list">
                                            <h5 class="title">Tags:</h5>
                                            <ul class="list-item">
                                                <li><a href="#">portfolio</a></li>
                                                <li><a href="#">charity</a></li>
                                                <li><a href="#">personal</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="right">
                                        <ul class="social-link">
                                            <li><a href="https://www.example.com" target="_blank"><i class="icofont-facebook"></i></a></li>
                                            <li><a href="https://www.example.com" target="_blank"><i class="icofont-dribbble"></i></a></li>
                                            <li><a href="https://www.example.com" target="_blank"><i class="icofont-linkedin"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- End Tag Box -->
                            </div>
                            <!--  End Tag Area  -->

                            <!-- Start Comment Form Area -->
                            <div class="comment-form-area section-mt-75">
                                <!-- Start Comment Form Box -->
                                <div class="comment-form-box">
                                    <h3 class="title">发送评论:</h3>
                                    <form class="default-form" th:action="@{/comments}" method="post">
                                        <div class="row mb-n6">
                                            <div class="col-xl-6 mb-6">
                                                <div class="default-form-group">
                                                    <input type="text" name="nickname" placeholder="Name" required>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 mb-6">
                                                <div class="default-form-group">
                                                    <input type="email" name="email" placeholder="Email" required>
                                                </div>
                                            </div>
                                            <div class="col-xl-12 mb-6">
                                                <div class="default-form-group">
                                                    <textarea name="content" placeholder="Comment" required></textarea>
                                                </div>
                                            </div>
                                            <div class="col-12 mb-6">
                                                <div class="default-form-group">
                                                    <button type="submit" class="btn btn-lg btn-outline-one">Submit Comment</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <!-- End Comment Form Box -->
                            </div>
                            <!--  End Comment Form Area  -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Blog List Section :::... -->

        <span th:replace="~{common::footer}"></span>


        <!-- material-scrolltop button -->
        <button class="material-scrolltop" type="button"></button>
    </main>

    <!-- Global Vendor, plugins JS -->

    <script th:src="@{/assets/js/vendor/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery-3.5.1.min.js}"></script>
    <script th:src="@{/assets/js/vendor/jquery-migrate-3.3.0.min.js}"></script>
    <script th:src="@{/assets/js/vendor/modernizr-3.11.2.min.js}"></script>
    <script th:src="@{/assets/js/plugins/swiper-bundle.min.js}"></script>
    <script th:src="@{/assets/js/plugins/jquery.appear.min.js}"></script>
    <script th:src="@{/assets/js/plugins/jquery.nice-select.js}"></script>
    <script th:src="@{/assets/js/plugins/venobox.min.js}"></script>
    <script th:src="@{/assets/js/plugins/jquery.waypoints.js}"></script>
    <script th:src="@{/assets/js/plugins/images-loaded.min.js}"></script>
    <script th:src="@{/assets/js/plugins/isotope.pkgd.min.js}"></script>
    <script th:src="@{/assets/js/plugins/counter.js}"></script>
    <script th:src="@{/assets/js/plugins/ajax-mail.js}"></script>
    <script th:src="@{/assets/js/plugins/material-scrolltop.js}"></script>
    <script th:src="@{/assets/js/main.js}"></script>
    <script th:src="@{/assets/prism/prism.js}"></script>

</body>

</html>
